<template>
  <div class="app-container config-box">
    <el-row>
      <el-col :xs="24" :sm="6" :md="6" :lg="3" class="dict-module">
        <div class="dic-t">
          <h3><i class="el-icon-s-operation"></i>参数模块</h3>
          <ul v-if="dictModule.length>0">
            <li v-for="(item,index) in dictModule" :key="index" @click="menuSelect(item,index)"
              :class="{active:index==isCurrent}">
              <label></label><span
                style="display: inline-block;width:32px;">{{item.code}}</span><span>{{item.name}}</span>
            </li>
          </ul>
          <ul v-else class="none-data">
            <li>暂无数据</li>
          </ul>
        </div>
      </el-col>
      <el-col :span="21">
        <Configure :key="refreshKey" :dictModule="dictModule" :openStatus="openStatus" :moduleId="moduleId" />
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import {
    listModule
  } from "@/api/system/config";
  import Configure from "./config.vue"
  export default {
    name: "Config",
    data() {
      var checkModule = (rule, value, callback) => {
        if (this.selectValue == null) {
          return callback(new Error(''));
        } else {
          callback();
        }
      };
      return {
        // 遮罩层
        loading: true,
        // 参数菜单
        dictModule: [],
        //点击状态
        isCurrent: null,
        refreshKey: "", //点击刷新组件
        //点击传递Id
        moduleId: "",
        openStatus: "configPage"
      }
    },
    created() {
      this.getModule()
    },
    methods: {
      // 查询参数模块
      getModule() {
        listModule().then(res => {
          this.dictModule = res.data
        })
      },

      // 选择参数菜单
      menuSelect(item, index) {
        this.isCurrent = index;
        this.moduleId = item.code;
        this.selectValue = item.code;
        this.refreshKey = Math.random();
      },
    },
    components: {
      Configure
    }
  };
</script>
<style lang="scss">
  .dick-select {
    input {
      color: #1890FF !important;
    }
  }

  .config-box {
    .none-data li {
      color: #999;
      justify-content: center;
      padding-top: 10px !important;
    }

    .dict-module {
      .dic-t {
        margin-right: 20px;
        border: 1px solid #eee;
        text-align: center;
        padding-bottom: 10px;
        position: relative;
        z-index: 999;
      }

      h3 {
        font-size: 15px;
        font-weight: normal;
        border-bottom: 1px solid #eee;
        padding: 10px;
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        margin-left: 15px;
      }

      ul li {
        label {
          width: 5px;
          height: 5px;
          display: inline-block;
          background: #ccc;
          vertical-align: middle;
          margin-right: 10px;
        }

        display: flex;
        align-items: center;
        padding: 5px;
        list-style: none;
        cursor: pointer;
        font-size: 14px;
        color: #606266;
        text-align: left;

      }

      // 高亮
      .active {
        color: #1890FF;

        label {
          background: #1890FF;
        }
      }
    }
  }
</style>
